<template>
  <div class="mainBook">
    <div class="title">责令限期改正通知书</div>
    <div class="one">
      <span style="color: red; font-size: 14px">*</span>
      <a-input
        class="myInput"
        v-model:value="dataForm.shortName"
        :bordered="false"
        placeholder="请输入消防机构简称"
        :maxlength="32"
        showCount
        style="width: 200px"
      />
      <div>消即字〔<span style="color: red; font-size: 14px">*</span></div>
      <a-input
        class="myInput"
        v-model:value="dataForm.charName"
        :bordered="false"
        placeholder="请输入记录表字"
        :maxlength="32"
        showCount
        style="width: 200px"
      />
      <div>〕第<span style="color: red; font-size: 14px">*</span></div>
      <a-input
        class="myInput"
        v-model:value="dataForm.numberName"
        :bordered="false"
        placeholder="请输入记录表号"
        :maxlength="32"
        showCount
        style="width: 200px"
      />
      <div>号</div>
    </div>
    <img class="infoImg" src="@/assets/images/info6.png" />
    <img class="infoImg" src="@/assets/images/info7.png" />
    <div class="tableTitle"> <span style="color: red; font-size: 14px">*</span>检查内容 </div>
    <div class="checkedBox" v-for="(item, index) in state" :key="index">
      <a-checkbox v-model:checked="item.checked" :disabled="item.checkedList ? true : false">
        {{ index + 1 }}.
      </a-checkbox>
      <div class="checkedMain" v-if="!item.isText">
        <div>{{ item.leftText }}</div>
        <a-checkbox
          v-model:checked="item.checkedList[0]"
          v-if="item.checkedList"
          @change="(e) => handleChecked(e, item)"
        >
          {{ item.midText }}</a-checkbox
        >
        <a-checkbox
          v-model:checked="item.checkedList[1]"
          v-if="item.checkedList"
          @change="(e) => handleChecked(e, item)"
        >
          {{ item.rightText }}</a-checkbox
        >
        <a-checkbox
          v-model:checked="item.checkedList[2]"
          v-if="item.checkedList && (item.checkedList.length == 3 || item.checkedList.length == 4)"
          @change="(e) => handleChecked(e, item)"
        >
          {{ item.rightText1 }}</a-checkbox
        >
        <a-checkbox
          v-model:checked="item.checkedList[3]"
          v-if="item.checkedList && item.checkedList.length == 4"
          @change="(e) => handleChecked(e, item)"
        >
          {{ item.rightText2 }}</a-checkbox
        >
      </div>
      <div class="checkedMain" v-else>
        <div>{{ item.leftText }}</div>
        <a-textarea
          v-model:value="dataForm.writeMsg"
          :bordered="true"
          placeholder="请输入"
          :maxlength="32"
          :auto-size="{ minRows: 2, maxRows: 5 }"
        />
      </div>
    </div>
    <img class="infoImg" src="@/assets/images/info2.png" />
    <div class="lastDate">
      对上述第项，责令你单位(场所)于<span style="color: red; font-size: 14px">*</span>
      <a-date-picker
        v-model:value="dataForm.lastDate"
        placeholder="请选择时间"
        valueFormat="YYYY-MM-DD"
        style="margin: 0 4px"
      />
      前改正。
    </div>
    <img class="infoImg" src="@/assets/images/info8.png" />
    <img class="infoImg" src="@/assets/images/info9.png" />
    <img class="infoImg" src="@/assets/images/info10.png" />
  </div>
</template>

<script setup lang="ts">
  import { ref, watch, reactive, withDefaults, defineProps } from 'vue';
  import { docProduct } from '@/api/account';
  import { message } from 'ant-design-vue';

  defineOptions({
    name: '',
  });
  const emit = defineEmits(['getDataUrl']);
  interface PropsDialog {
    id: string; //弹窗是否出现
  }
  const props = withDefaults(defineProps<PropsDialog>(), {
    id: '1',
  });
  const dataForm = ref({
    shortName: '',
    charName: '',
    numberName: '',
    writeMsg: '',
    lastDate: '',
  });
  const state = reactive([
    {
      checked: false,
      isText: false,
      leftText: '未依法进行消防设计备案/竣工验收消防备案；',
    },
    {
      checked: false,
      isText: false,
      checkedList: [false, false],
      leftText: '消防设施、器材、消防安全标志',
      midText: '配置、设置不符合标准，',
      rightText: '未保持完好有效；',
    },
    {
      checked: false,
      isText: false,
      checkedList: [false, false, false, false],
      leftText: '',
      midText: '损坏/',
      rightText: '挪用/',
      rightText1: '擅自拆除/',
      rightText2: '停用消防设施、器材；',
    },
    {
      checked: false,
      isText: false,
      checkedList: [false, false, false],
      leftText: '',
      midText: '占用/',
      rightText: '堵塞/',
      rightText1: '封闭疏散通道、安全出口；',
    },
    {
      checked: false,
      isText: false,
      checkedList: [false, false, false, false],
      leftText: '',
      midText: '埋压/',
      rightText: '圈占/',
      rightText1: '遮挡消火栓，',
      rightText2: '占用防火间距；',
    },
    {
      checked: false,
      isText: false,
      checkedList: [false, false, false],
      leftText: '',
      midText: '占用/',
      rightText: '堵塞/',
      rightText1: '封闭消防车通道，妨碍消防车通行；',
    },
    {
      checked: false,
      isText: false,
      leftText: '人员密集场所外墙门窗上设置影响逃生、灭火救援的障碍物；',
    },
    {
      checked: false,
      isText: false,
      checkedList: [false, false, false],
      leftText: '使用',
      midText: '不符合市场准入/',
      rightText: '不合格/',
      rightText1: '国家明令淘汰的消防产品；',
    },
    {
      checked: false,
      isText: false,
      checkedList: [false, false],
      leftText: '',
      midText: '电器产品/',
      rightText:
        '燃气用具的安装、使用及其线路、管路的设计、敷设、维护保养、检测不符合消防技术标准和管理规定；',
    },
    {
      checked: false,
      isText: false,
      checkedList: [false, false, false, false],
      leftText: '不履行《中华人民共和国消防法》',
      midText: '第十六条/',
      rightText: '第十七条/',
      rightText1: '第十八条/',
      rightText2: '第二十一条第二款规定的其他消防安全职责；',
    },

    {
      checked: false,
      isText: true,
      leftText: '其他消防安全违法行为和火灾隐患：',
    },
  ]);
  // 点击提交
  function confirm(values) {
    if (!dataForm.value.shortName) return message.info('请输入消防机构简称');
    if (!dataForm.value.charName) return message.info('请输入记录表字');
    if (!dataForm.value.numberName) return message.info('请输入记录表号');
    if (state.filter((item) => !item.checked).length == state.length)
      return message.info('请至少选择一条检查内容');
    if (state[10].checked) {
      if (!dataForm.value.writeMsg) return message.info('请输入其他消防安全违法行为和火灾隐患');
    }
    if (!dataForm.value.lastDate) return message.info('请选择时间');

    let params = {
      type: 8, //文书类型  6 当场处罚书 7 责令立改书 8责令限改书 9 检查意见书
      ...dataForm.value,
      id: props.id,
      checkObjArr: <number[]>[],
    };
    let arr: number[] = [];
    state.map((item) => {
      if (item.checked) {
        arr.push(1);
      } else {
        arr.push(0);
      }
      if (item.checkedList) {
        item.checkedList.map((it) => {
          if (it) {
            arr.push(1);
          } else {
            arr.push(0);
          }
        });
      }
    });
    params.checkObjArr = arr;
    docProduct(params).then((res) => {
      if (res.code == 0) {
        message.success('制作成功');
        emit('getDataUrl', res);
        dataForm.value = {
          shortName: '',
          charName: '',
          numberName: '',
          writeMsg: '',
          lastDate: '',
        };
        state.map((item) => {
          item.checked = false;
        });
        state[1].checkedList = [false, false];
        state[2].checkedList = [false, false, false, false];
        state[3].checkedList = [false, false, false];
        state[4].checkedList = [false, false, false, false];
        state[5].checkedList = [false, false, false];
        state[7].checkedList = [false, false, false];
        state[8].checkedList = [false, false];
        state[9].checkedList = [false, false, false, false];
      }
    });
  }

  const handleChecked = (e, item) => {
    if (e.target.checked) {
      item.checked = true;
    } else {
      if (!item.checkedList.find((item) => item)) {
        item.checked = false;
      }
    }
  };
  defineExpose({
    confirm,
  });
</script>

<style lang="less" scoped>
  .mainBook {
    border-top: 1px solid #f0f0f0;
    padding: 24px;
    .title {
      color: #000000;
      font-size: 20px;
      text-align: center;
      margin-bottom: 24px;
    }
    .one {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: #4d4d4d;
      font-size: 16px;
      .myInput {
        width: 180px;
        border-bottom: 1px solid #f0f0f0;
      }
    }
    .two {
      padding: 0 12px;
      border-bottom: 1px solid #4d4d4d;
    }
    .infoImg {
      width: 100%;
      margin-top: 16px;
    }
    .tableTitle {
      height: 50px;
      background: #fafafa;
      display: flex;
      align-items: center;
      color: #444444;
      margin-top: 24px;
      padding-left: 16px;
      font-weight: 500;
    }
    .checkedBox {
      display: flex;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #f0f0f0;

      .checkedMain {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
    }
    .lastDate {
      display: flex;
      align-items: center;
      padding-left: 50px;
      margin-top: 12px;
      font-size: 15px;
    }
  }
</style>
